import AutoChart from '@/components/Echarts/AutoChart';
// @ts-ignore
import { articleComments } from '@/services/api';
import React, { useEffect } from 'react';
import { useImmer } from 'use-immer';

const ColumnCharts: React.FC = () => {
  const [options, setOptions] = useImmer({
    // title: {
    //   text: '评分TOP15统计',
    //   left: 'center',
    // },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        // name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          {
            name: '暂无数据',
            value: 0,
          },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  });

  useEffect(() => {
    articleComments().then((res) => {
      setOptions((draft) => {
        draft.series[0].data = res.data.map((i: API.ChartsData) => {
          Number(i.value);
          return i;
        });
      });
    });
  }, []);

  return <AutoChart option={options as any}></AutoChart>;
};
export default ColumnCharts;
